<template>
    <div class="goods">
        <!-- 购物 -->
        <div class="goodsTable">
            <div class="operate">
                <el-button type="primary" @click="addGoods" v-if="!cardShow">添加商品</el-button>
                <div class="search">
                    <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入商品名查询" />
                    <el-button type="primary" @click="search">查询</el-button> 
                </div>
            </div>
            <div class="cardGoods" v-if="cardShow">
                <el-card class="box-card" @click="DetailGoods(item)" v-for="(item,index) in tableData" :key="index">
                    <div class="cardImg"><img :src="item.pictureBase64" /></div>
                    <div class="cardText">
                        <p>名称：<span style="font-weight: bold;font-size: 18px;color:rgb(69 69 69);">{{item.name}}</span></p>
                        <p>价格：<span>{{item.price}}</span></p>
                    </div>
                </el-card>
            </div>
            <el-table border v-loading="loading" :data="tableData" style="width: 100%" v-else>
                <el-table-column prop="id" label="id" width="90" />
                <el-table-column prop="userName" label="图片" width="120">
                    <template #default="scope">
                        <img style="width: 40px;" :src=scope.row.pictureBase64 />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名" width="190" />
                <el-table-column prop="price" label="价格" width="120" />
                <el-table-column prop="brand" label="品牌" width="120" />
                <el-table-column label="销售状态" width="120">
                    <template #default="scope">
                        <span v-if="scope.row.salesStatus==0">上架</span>
                        <span v-if="scope.row.salesStatus==1">已售完</span>
                        <span v-if="scope.row.salesStatus==2">下架</span>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="库存" width="120" />
                <el-table-column prop="createTime" label="时间" width="190" />
                <el-table-column label="操作" width="230">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope.row)">修改</el-button>
                    <el-button type="primary" size="small" @click="DetailGoods(scope.row)">详情</el-button>
                    <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="商品名">
                        <el-input v-model="fromData.name" />
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="fromData.price" />
                    </el-form-item>
                    <el-form-item label="照片">
                        <div id="fileSelect">
                            <input @change="getFile($event)" type="file" />
                            <span v-if="SrcImg==null">+</span>
                            <img style="width: 80px;" v-else :src="SrcImg" />
                        </div>
                    </el-form-item>
                    <el-form-item label="品牌">
                        <el-input v-model="fromData.brand" />
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="fromData.count" />
                    </el-form-item>
                    <el-form-item label="销售状态">
                        <el-select
                            v-model="fromData.salesStatus"
                            placeholder="请选择销售状态">
                            <el-option
                                v-for="(item,index) in salesStatusList"
                                :key="index"
                                :label="item.title"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.descrs" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="drawer = false">取消</el-button>
                    </el-form-item>
                </el-form>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage  } from 'element-plus'
export default defineComponent({
    data(){
        return{
            loading:true,
            SrcImg:null,
            cardShow:true,
            userMessage:null,      // 用户信息
            searchName:'',
            tableData:[
                {
                    "id":1,
                    "name":"sss",
                    "pictureBase64":"dsd",
                    "price":1,
                    "count":"12",
                    "salesStatus":'',
                    "brand":'',
                    "descrs":"sdsd",
                    "createTime":"2020-02-01"
                }
            ],
            salesStatusList:[
                {
                    id:0,
                    title:'上架'
                },{
                    id:1,
                    title:'已售光'
                },{
                    id:2,
                    title:"下架"
                }
            ],
            fromData:{
                "id":0,
                "name":"",
                "picture":"",
                "price":1,
                "brand":'',
                "salesStatus":0,
                "count":"",
                "descrs":""
                },
            drawer:false,
            Title:"添加",
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            }
        }
    },
    setup() {
        // 路由
        const router = useRouter();
        const route = useRoute();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            router,
            store
        } 
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        if(this.userMessage!=null && this.userMessage.Identify=="0") this.cardShow = false;
        this.loadData();
    },
    mounted () {
        
    },
    methods:{
        loadData(){
            let self = this;
            let row = self.pageData();
            row.name = null;
            self.$http.post(`${self.baseUrl}/goods/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
                self.loading = false;
            })
        },
        handleClick(row){
            this.drawer = true;
            this.Title = "修改";
            this.SrcImg = row.pictureBase64;
            this.fromData = row;
            this.fromData.id = row.id;
            this.fromData.salesStatus = row.salesStatus;
        },
        deleteClick(row){
            let self = this;
            self.$http.get(`${self.baseUrl}/goods/deleteGoods?id=${row.id}`).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"删除成功",
                        type:'success'
                    })
                }
            })
        },
        //查看商品详情页
        DetailGoods(msg){
            this.store.commit("basicGoodsId",msg.id);
            this.router.push({path:"/goodsDetail"})
        },
        onSubmit(){
            let self = this;
            let f = new FormData();
            f.append("id",self.fromData.id);
            f.append("name",self.fromData.name);
            if(self.fromData.picture!=null) f.append("picture",self.fromData.picture);
            f.append("price",self.fromData.price);
            f.append("count",self.fromData.count);
            f.append("brand",self.fromData.brand);
            f.append("salesStatus",self.fromData.salesStatus);
            f.append("descrs",self.fromData.descrs);
            let p = this.Title == "添加" ? "addGoods" : "updateGoods";
            self.$http.post(`${self.baseUrl}/goods/${p}`,f).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"操作成功",
                        type:'success'
                    })
                    self.drawer = false;
                    self.loadData()
                }else{
                    ElMessage({
                        message:"操作失败",
                        type:'error'
                    })
                    self.drawer = false;
                }
            })
        },
        addGoods(){
            this.fromData = this.initial();
            this.drawer = true;
            this.Title = "添加";
            this.flagStatus = false;
            this.SrcImg = null;
        },
        search(){
            if(this.userMessage==undefined){
                ElMessage({
                    message:"请登录后操作",
                    type:'warning'
                })
                return;
            }
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.uid = this.userMessage.Id;
            row.identify = this.userMessage.Identify;
            self.$http.post(`${self.baseUrl}/goods/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        // 获取文件
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.fromData.picture = file;
            self.converBase64(file)
        },
        //将图片文件转换base64
        converBase64(file){
            let self = this;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.loadData();
        },
        initial(){
            return{
                    "name":"",
                    "picture":null,
                    "price":0,
                    "brand":'',
                    "salesStatus":0,
                    "count":0,
                    "descrs":""
                }
        }
    }
})
</script>
<style scoped>
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
    .el-pagination{
        margin-top: 5px;
    }
    .goodsTable{
        margin-top: 16px;
    }
    .operate{
        margin-bottom: 10px;
    }
    .search{
        float: right;
    }
    .cardGoods{
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        flex-wrap: wrap;
    }
    .box-card{
        width: 270px;
        height: 250px;
        margin: 18px 10px;
        border-radius: 20px;
        cursor: pointer;
    }
    .cardImg{
        width: 75%;
        height: 150px;
        margin: 0 auto 8px auto;
    }
    .cardImg img{
        width: 87%;
        height: 100%;
    }
    .cardText p{
        width: 80%;
        color: #857a7a;
        font-size: 13px;
        line-height: 25px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 1px auto 1px auto;
    }
    .cardText p span{
        color: #f45151;
        font-size: 19px;
    }
</style>